
<template>
    <div>
        <el-dialog :title="dialogTitle" :visible.sync="isVisible" width="40%" :close-on-click-modal=false
            :close-on-press-escape=false>
            <div class="top-template">
                <span style="margin-right: 10px;margin-left: 10px;">流程模板</span>
                <el-select placeholder="请选择" size="mini" style="flex-grow: 1; margin-right: 10px">
                </el-select>
            </div>
            <div class="bottom-dialog">
                <span class="text-approve">审批流程</span>
                <el-timeline style="margin-top: 20px; padding-left: 10px;">
                    <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                        :type="activity.type" :color="activity.color" :size="activity.size">

                        <div style="display: flex; justify-content: space-between;">
                            <span>{{ activity.content }}</span>
                            <div style="display:flex; ">
                                <span class="border-text">尤</span>
                                <span class="border-text">尤</span>
                            </div>
                        </div>
                        <span class="timestamp-class">
                            <div class="border">
                                <span class="text">单人</span>
                            </div>
                        </span>
                        <!-- {{ activity.content }} -->
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="isVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitClick()" :loading="submitting" :disabled="submitting">确
                    定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import visible from '@/mixins/edit-dialog'

export default {
    name: "SubmitApprove",
    mixins: [visible],
    props: {
        entity: {
            type: Object
        },
    },
    data() {
        return {
            submitting: false,
            dialogTitle: '提交审批',
            activities: [
                {
                    content: '项目经理',
                    size: 'large',
                    color:'rgba(99, 147, 232, 1)'

                },
                {
                    content: '项目经理',
                    size: 'large',
                    color:'rgba(99, 147, 232, 1)'

                },

                {
                    content: '项目经理',
                    size: 'large',
                    color:'rgba(99, 147, 232, 1)'

                },
                {
                    content: '项目经理',
                    size: 'large',
                    color:'rgba(99, 147, 232, 1)'
                },

            ]

        }
    },
    watch: {
        entity(v) {
            if (v) {


            } else {
                this.form = {

                };
            }
        }
    },
    computed: {


    },
    methods: {


    }
}
</script>

<style scoped>
.top-template {
    height: 50px;
    width: 100%;
    background-color: #EBF1FA;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-dialog {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.text-approve {
    border-left: 3px solid #329EFF;
    padding-left: 10px;
    font-weight: bold;
    font-size: 16px;
    color: rgba(51, 51, 51, 1);
}

.border-text {
    height: 40px;
    width: 40px;
    background-color: rgba(99, 147, 232, 1);
    border-radius: 4px;
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
    margin-left: 20px;
}

.timestamp-class {
    position: absolute;
    top: 25px;

    .border {
        height: 22px;
        width: 36px;
        background-color: rgba(238, 241, 245, 1);
        text-align: center;

        .text {
            line-height: 22px;
            color: rgba(102, 102, 102, 1);

        }
    }
}


</style>
